<template>
	<view class="page">
		<view class="h30"></view>
		<view class="flex-SB" @click="showCal = true" style="width: 280rpx;margin: 0 auto;color: #1D6EFA;font-size: 28rpx;">
			<u-icon color="#1D6EFA" name="arrow-left"></u-icon>
			<view>{{dateTime}}</view>
			<u-icon color="#1D6EFA" name="arrow-right"></u-icon>
		</view>
		<view class="h30"></view>
		<view class="blocks">
			<view style="padding: 20rpx 40rpx;color: #333333;">
				<view class="flex-SB">
					<view>心率状态趋势图</view>
					<view style="font-size: 20rpx;color: #aaa;"></view>
				</view>
				<view class="flex-SB">
					<view style="font-size: 66rpx;">{{hr}}<text style="font-size: 24rpx;margin-left: 6rpx;">次/分钟</text></view>
				</view>

				<view style="font-size: 20rpx;color: #aaa;">{{lastTime}}</view>
			</view>
			<view style="width: 686rpx;height: 220px;">
				<l-echart ref="tiredChartDetails"></l-echart>
			</view>
		</view>
		<view class="h30"></view>
		<view class="blocks flex-SB" style="text-align: center;">
			<view class="box-a" style="padding: 20rpx;">
				<view class="text-a">心率过高提示</view>
				<view class="text-b">{{highHeartRate}}次</view>
			</view>
			<view class="box-a">
				<view class="text-a">静息心率</view>
				<view class="text-b">{{hr}}次</view>
			</view>
			<view class="box-a">
				<view class="text-a">心率过低提示</view>
				<view class="text-b">{{lowHeartRate}}次</view>
			</view>
		</view>
		<view class="h30"></view>
		<view class="blocks">
			<view style="font-size: 30rpx;font-weight: bolder;padding: 30rpx;">
				心率说明
			</view>
			<view style="color: #A6A6A6;font-size: 28rpx;padding: 0 30rpx 30rpx;    line-height: 1.8;letter-spacing: 2px;">
				<view>静息心率:又称为安静心率，是指在清醒、不活动的安静状态下，每分钟心跳的次数。</view>
				<view>心率过高:指心率高于150次/分钟的情形。</view>
				<view>心率过低:指心率低于50次/分钟的情形。</view>
			</view>
		</view>
		<view class="h30"></view>
		<u-popup :show="showCal">
			<uni-calendar class="uni-calendar--hook" :endDate="maxDate" :showMonth="false" @change="datechange" />
		</u-popup>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import {
		mapState
	} from 'vuex';
		const d = new Date()
		const year = d.getFullYear()
		let month = d.getMonth() + 1
		month = month < 10 ? `0${month}` : month
		let date = d.getDate();
		date = date < 10 ? `0${date}` : date;
	export default {
		computed: {
			...mapState(['member'])
		},
		components: {
			LEchart,
		},
		data() {
			return {
				lastTime:'',
				highHeartRate:'-',
				lowHeartRate:'-',
				hr:'-',
				showCal:false,
				dateTime: `${year}-${month}-${date}`,
				maxDate:`${year}-${month}-${date}`,
				minDate:`${year}-${month}-${date-100}`,
				nowData:null
			};
		},
		onLoad(opt) {
			let {dateTime} = opt;
			this.dateTime = dateTime;
			// this.dateTime = "2025-01-11";
			this.initPage(this.dateTime);
		},
		methods:{
			initPage(dateTime){
				this.lastTime = '';
				this.highHeartRate = '-';
				this.lowHeartRate = '-';
				this.hr = '-';
				if(this.$refs.tiredChartDetails){
					this.$refs.tiredChartDetails.dispose()
				}
				if(!this.member.imei){
					return this.$toast("请登录后查看您的数据！");
				};
				uni.$u.http.post('/client/watch_health_data/type', {
					imei: this.member.imei,
					type:6,
					date:dateTime
				}).then(res => {
					if(res.status == 500){
						return this.$toast(res.msg||'获取数据失败！');
					}
					if(res.status == 200){
						let initdata = [];
						let datetimes = [];
						let date = [];
						let data = res.data.hr||[];
						
						// this.nowData = JSON.parse(res.data.data.detail);
						this.lowHeartRate = res.data.dnHrCount;
						this.highHeartRate = res.data.upHrCount;
						let maxHr = 0;
						let minHr = 0;
						if (data.length) {
							this.hr = data[0].value;
							this.lastTime = data[0].time.slice(11, 16);
						}
						for(let i in data){
							// let hrTime = uni.$u.timeFormat(new Date(data[i].time).getTime(), 'hh:MM');
							// datetimes.push(hrTime);
							initdata.unshift(data[i].value)
							date.unshift(data[i].time.slice(11, 16))
						}

						this.initTiredChart(initdata,date);
					}

				});
			},
			datechange(e){
				this.showCal = false;
				let dstr = e.fulldate;
				if(this.dateTime == dstr){
					return;
				}
				this.dateTime = dstr;
				this.initPage(this.dateTime);
			},
			initTiredChart(data,date){
				if(data.length==0){
					for(let i=0;i<7;i++){
						data.push(0)
						date.push('')
					}
				}
				if(data.length==1){
					data.unshift(0)
					date.unshift('')
				}
				
				let option = {
					color: ['#ff4433', '#faa69b'],
					grid: {
						top: 20,
						left: 30,
						right: 40,
						bottom: 30
					},
					  tooltip: {
					    trigger: 'axis'
					  },
					xAxis: {
						type: 'category',
						data: date,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color:'#BBBBBB'
						},
					},
					yAxis: {
						min:0,
						max:160,
						type: 'value',
						position: 'right',
						axisLine: {
							show: false
						},
						axisLabel: {
							color:'#BBBBBB'
						},
					},
					series: [{
						showSymbol: false,
						data: data,
						type: 'line',
						padding: 5,
						// smooth: true,
						areaStyle: {
							opacity: 0.9,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgb(255, 183, 183)'
								},
								{
									offset: 1,
									color: 'rgb(250, 250, 250)'
								}
							])
						},
					}]
				};
				this.$nextTick(() => {
					this.$refs.tiredChartDetails.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box-a{
		padding: 20rpx;
		text-align: center;
	}
	.text-a{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 44rpx;
		margin: 20rpx auto;
	}
	.text-b{
		font-size: 22rpx;
		color: #8C8C8D;
	}
</style>
